<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../teacher/js/elementui/index.css">
    <script src="../teacher/js/vue.js"></script>
    <script src="../teacher/js/elementui/index.js"></script>
    <script src="../teacher/js/axios.min.js"></script>
    <style>
        .el-main {
            padding-top: 0;
        }
        .el-message-box__wrapper {
            bottom: auto;
            top:80px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-main>
            <el-row :gutter="20" type="flex">
                <el-col :span="6">
                    <div>角色名称:</div>
                    <el-input v-model="query.name" placeholder="请输入角色名称"></el-input>
                </el-col>
                <el-col :span="2">
                    <div>&nbsp;</div>
                    <el-button icon="el-icon-refresh" type="primary" @click="search">搜索</el-button>
                </el-col>
                <el-col :span="2">
                    <div>&nbsp;</div>
                    <el-button icon="el-icon-refresh" type="primary" onclick=" window.location.reload();">刷新</el-button>
                </el-col>
                <el-col :span="4">
                    <div>&nbsp;</div>
                    <el-button type="success" @click="addRoleShow">新增角色</el-button>
                </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 20px;">
                <el-table
                        :data="roleData">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="角色名称">
                    </el-table-column>
                    <el-table-column
                            label="模块操作">
                        <template slot-scope="scope">
                            <el-button type="text" @click="setModuleShow(scope.row)">设置模块</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="权限操作">
                        <template slot-scope="scope">
                            <el-button type="text" @click="setPermissionShow(scope.row)">设置权限</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="角色操作">
                        <template slot-scope="scope">
                            <el-button type="text" @click="deleteRole(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
            <el-row type="flex" justify="center">
                <el-pagination
                        layout="prev, pager, next"
                        :current-page.sync="query.page"
                        :page-size="query.rows"
                        @current-change="queryRole"
                        :total="total">
                </el-pagination>
            </el-row>
        </el-main>
    </el-container>
    <div>
        <el-dialog
                title="设置权限"
                :visible.sync="permission.show">
            <el-tree
                    ref="permissionTree"
                    show-checkbox
                    node-key="permissionId"
                    :data="permission.data"
                    :props="permission.props"
                    :default-checked-keys="permission.checkIds"
            ></el-tree>
            <el-button @click="setPermission">确定</el-button>
            <el-button @click="permission.show=false">取消</el-button>
        </el-dialog>

        <el-dialog
                title="设置模块"
                :visible.sync="module.show">
            <el-tree
                    ref="moduleTree"
                    show-checkbox
                    check-strictly
                    node-key="id"
                    :data="module.data"
                    :props="module.props"
                    :default-checked-keys="module.checkIds"
                    @check-change="treeCheck"
            ></el-tree>
            <el-button @click="setModules">确定</el-button>
            <el-button @click="module.show=false">取消</el-button>
        </el-dialog>

        <el-dialog
                :title="add.title"
                :visible.sync="add.show">
            <el-form  :rules="addRules" ref="addForm" :model="add" label-position="left" label-width="80px">
                <el-form-item prop="name" label="角色名称">
                    <el-input v-model="add.name"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary"  @click="addRole">新增</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</div>
</body>
<script>
    axios.defaults.headers.common['Authorization'] = "bearer " + sessionStorage.getItem("access_token");
    axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8';
    const main = {
        data() {
            return {
                addRules:{
                    name: [
                        { required: true, message: '请输入用户名称', trigger: 'blur' },
                    ],
                },
                //角色数据
                roleData: [],
                total: 0,
                //角色查询
                query: {
                    page: 1,
                    rows: 10,
                    name: ''
                },
                //当前模块
                module: {
                    show: false,
                    data: [],
                    checkIds: [],
                    props: {
                        children: 'children',
                        label: 'name'
                    }
                },
                activeData: {},
                add:{
                    title:'',
                    show:false,
                    name:''
                },
                permission:{
                    show: false,
                    data: [],
                    checkIds: [],
                    props: {
                        children: 'children',
                        label: 'name'
                    }
                }
            }
        },
        methods: {
            //角色删除
            deleteRole(row){
                this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    type: 'warning',
                }).then(() => {
                    axios({
                        method:"delete",
                        url:'/api/admin/role/'+row.id
                    })
                        .then(res=>{
                            res=res.data;
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.queryRole();
                        })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //权限框显示
            setPermissionShow(row){
                this.activeData = row;
                axios({
                    method:'get',
                    url:'/api/admin/permission/'+row.id
                }).then(res=>{
                    res=res.data;
                    this.permission.data=res.permissions;
                    this.permission.checkIds=res.pids;
                    this.permission.show=true;
                })
            },
            setPermission(){
                let treeData = this.$refs.permissionTree.getCheckedNodes(true, false);
                let pids=treeData.map(item=>{
                    return item.permissionId;
                });
                let params=new URLSearchParams();
                params.append("pids",pids.join(","));
                axios({
                    method:'post',
                    url:"/api/admin/role/setPermission/"+this.activeData.id,
                    data:params
                }).then(res=>{
                    res=res.data;
                    if(res.success){
                        this.$message({
                            showClose: true,
                            message: '设置成功',
                            type: 'success'
                        });
                        this.permission.show = false;
                    }
                })
            },
            //模块树单击事件
            treeCheck(row, isCheck) {
                let m = this.$refs.moduleTree;
                if (isCheck) {
                    m.setChecked(row.parentId, true, false);
                    //选中所有子节点
                    //TODO 有bug
                  /*  let chidren = row.children;
                    chidren.forEach(item => {
                        m.setChecked(item, true, false);
                    })*/
                } else {
                    //如果子节点全部没有选中 父节点也取消勾选
                    let parentNode = m.getNode(row.parentId);
                    if (parentNode != null) {
                        let chidren = parentNode.childNodes;
                        let isQx = false;
                        chidren.forEach(item => {
                            if (item.checked) {
                                isQx = true;
                            }
                        });
                        m.setChecked(row.parentId, isQx, false);
                    }
                    //取消所有子节点
                    let chidren = row.children;
                    chidren.forEach(item => {
                        m.setChecked(item, false, false);
                    })
                }
            },
            //角色设置模块
            setModules() {
                let treeData = this.$refs.moduleTree.getCheckedNodes(false, true);
                let midS=treeData.map(item=>{
                    return item.id;
                });
                let params=new URLSearchParams();
                params.append("mids",midS.join(","));
                axios({
                    method:'post',
                    url:"/api/admin/role/setModule/"+this.activeData.id,
                    data:params
                }).then(res=>{
                    res=res.data;
                    if(res.success){
                        this.$message({
                            showClose: true,
                            message: '设置成功',
                            type: 'success'
                        });
                        this.module.show = false;
                    }
                })
            },
            //模块框显示
            setModuleShow(row) {
                this.activeData = row;
                axios({
                    method: 'get',
                    url: '/api/admin/module/getAllCheckRole',
                    params: {
                        roleid: row.id
                    }
                }).then(res => {
                    res = res.data
                    this.module.data = res.modules;
                    this.module.checkIds = res.mids;
                    this.module.show = true
                })
            },
            //新增角色
            addRole(){
               this.$refs['addForm'].validate((valid) => {
                   if (valid) {
                       let params=new URLSearchParams();
                       params.append("name",this.add.name);
                       axios({
                           method:'post',
                           url:'/api/admin/role',
                           data:params,
                       }).then(res=>{
                           res=res.data;
                           if(res.success){
                               this.queryRole();
                               this.add.show=false;
                               this.$refs['addForm'].resetFields();
                           }
                       })
                   } else {
                       this.$message({
                           showClose: true,
                           message: '新增失败',
                           type: 'error'
                       });
                       return false;
                   }
               });
            },
            //新增角色框显示
            addRoleShow() {
                this.add.title="新增角色";
                this.add.show=true;
            },
            search() {
                this.query.page = 1;
                this.queryRole();
            },
            queryRole() {
                axios({
                    method: 'get',
                    url: '/api/admin/role',
                    params: this.query
                }).then(res => {
                    res = res.data;
                    this.roleData = res.rows;
                    this.total = res.total;
                })
            }
        },
        mounted() {
            this.queryRole();
        }
    };

    const Component = Vue.extend(main);
    new Component().$mount('#app')
</script>
</html>